<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"/>
    <title> Highlight point features | Sample | ArcGIS API for JavaScript 4.18 </title>

    <link href="https://js.arcgis.com/4.18/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.18/"></script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #paneDiv {
            position: absolute;
            bottom: 40px;
            width: 100%;
            text-align: center;
            background-color: transparent;
            color: white;
        }

        .esri-button-overwrite {
            width: auto;
            display: table-cell;
            margin: 4px;
            background-color: white;
            color: #0079c1;
        }
    </style>
    <script>
        require(["esri/Map", "esri/WebScene", "esri/views/SceneView"], (
            Map,
            WebScene,
            SceneView
        )=> {
            var webScene = new WebScene({
                portalItem: {
                    // autocasts as new PortalItem()
                    id: "475a7161ed194460b5b52654e29581a2"
                }
            });

            var view = new SceneView({
                map: webScene,
                container: "viewDiv",
                highlightOptions: {//用于配置突出显示的选项
                    color: [255, 241, 58],
                    fillOpacity: 0.4,//填充的不透明度（光晕内的区域）
                },
                environment: {
                    atmosphereEnabled: true,//大气
                    atmosphere: {
                        quality: "high"//大气质量高
                    }
                }
            });

            webScene.when(()=>{
                //获取图层
                let stationLayer = webScene.layers.getItemAt(1);
                //获取在给定图层的视图上创建的LayerView
                view.whenLayerView(stationLayer).then((layerView)=>{
                    //创建可用于获取满足图层当前定义表达式的要素的查询对象
                    let queryStations = stationLayer.createQuery();


                    //给所有按钮添加点击事件
                    var buttons = document.querySelectorAll("button");
                    for (var i = 0, button = null; (button = buttons[i]); i++) {
                        button.addEventListener("click", onClick);
                    }

                    //点击事件
                    function onClick(event){
                        queryStations.where="nom='" + event.target.innerText + "'";
                        //对关联的要素服务执行查询并返回 FeatureSet
                        stationLayer.queryFeatures(queryStations).then((result)=>{
                            layerView.highlight(
                                result.features[0].attributes["OBJECTID"]
                            );
                        });
                    }
                });
            });
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="paneDiv">
    <h3>地铁站</h3>
    <button class="esri-button esri-button-overwrite">Valmy</button>
    <button class="esri-button esri-button-overwrite">St-Jean Vieux Lyon</button>
    <button class="esri-button esri-button-overwrite">Charpennes</button>
    <button class="esri-button esri-button-overwrite">Sans souci</button>
    <button class="esri-button esri-button-overwrite">Hôtel de Ville</button>
    <button class="esri-button esri-button-overwrite">Garibaldi</button>
</div>
</body>
</html>
